<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				width: 350px;
				height: 622.39px;
				margin: 0 auto;
				background: url(1.jpg) no-repeat center;
				background-size: cover;
			}
			
			#txt {
				width: 347px;
				height: 180px;
				background: rgba(255, 255, 255, 0);
				outline: none;
				color: white;
				font-size: 50px;
				border: none;
			}
			
			#ac {
				width: 83px;
				height: 86px;
				outline: none;
				background: rgba(255, 255, 255, 0);
				border: none;
				float: left;
			}
			
			#a1 {
				width: 170px;
				height: 86px;
				background: rgba(255, 255, 255, 0);
				border: none;
				float: left;
				outline: none;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<input id="txt" />
			<input id="ac" type="button" onclick="qinchu()" />
			<input id="ac" type="button" onclick="zhengfu()" />
			<input id="ac" type="button" onclick="baifenbi()" />
			<input id="ac" type="button" onclick="chu()" />
			<input id="ac" type="button" onclick="seven()" />
			<input id="ac" type="button" onclick="eight()" />
			<input id="ac" type="button" onclick="nine()" />
			<input id="ac" type="button" onclick="cheng()" />
			<input id="ac" type="button" onclick="four()" />
			<input id="ac" type="button" onclick="five()" />
			<input id="ac" type="button" onclick="six()" />
			<input id="ac" type="button" onclick="jian()" />
			<input id="ac" type="button" onclick="one()" />
			<input id="ac" type="button" onclick="two()" />
			<input id="ac" type="button" onclick="three()" />
			<input id="ac" type="button" onclick="jia()" />
			<input id="a1" type="button" onclick="zero()" />
			<input id="ac" type="button" onclick="point()" />
			<input id="ac" type="button" onclick="dengyu()" />
		</div>
		<script>
			var qinchu = function() {
				txt.value = "";
			}
			var zhengfu = function() {
				txt.value = txt.value * (-1);
			}
			var baifenbi = function() {
				txt.value = txt.value + "%";
			}
			var chu = function() {
				txt.value = txt.value + "/";
			}
			var seven = function() {
				txt.value = txt.value + "7";
			}
			var eight = function() {
				txt.value = txt.value + "8";
			}
			var nine = function() {
				txt.value = txt.value + "9";
			}
			var cheng = function() {
				txt.value = txt.value + "*";
			}
			var four = function() {
				txt.value = txt.value + "4";
			}
			var five = function() {
				txt.value = txt.value + "5";
			}
			var six = function() {
				txt.value = txt.value + "6";
			}
			var jian = function() {
				txt.value = txt.value + "-";
			}
			var one = function() {
				txt.value = txt.value + "1";
			}
			var two = function() {
				txt.value = txt.value + "2";
			}
			var three = function() {
				txt.value = txt.value + "3";
			}
			var jia = function() {
				txt.value = txt.value + "+";
			}
			var zero = function() {
				txt.value = txt.value + "0";
			}
			var point = function() {
				txt.value = txt.value + ".";
			}
		</script>

	</body>

</html>